<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="javascripts/Vue/vue.js"></script>
  </head>
  <body>
    <div>
    <h1>
      登录模拟--MySQL数据库&nbsp;&nbsp;&nbsp;&nbsp;
      <button onclick="exits()">退出登录</button>
    </h1>
    <p>[guyueyan]数据库中的表[picture]</p>
    <div>
      <div>&nbsp;name&nbsp;:<input type="text" id="username"></div>
      <div>user_id:<input type="number" id="user_id"></div>
      <div>&nbsp;type&nbsp;:<input type="text" id="type"></div>
      <div><button type="submit" onclick="sql_write()">写入</button></div>

      <div><hr></div>

      <div>
        <div>
          删除：<input type="number" id="del_id">
          <button onclick="sql_delete()">删除</button>
        </div>
      </div>
      <hr>
      <div>
        <div>
          修改对应id的内容：
          <div>
            <input type="text" id="up_id">
            <div>&nbsp;name&nbsp;:<input type="text" id="up_username"></div>
            <div>user_id:<input type="number" id="up_user_id"></div>
            <div>&nbsp;type&nbsp;:<input type="text" id="up_type"></div>
          </div>
          <button onclick="sql_updata()">修改</button>
          
        </div>
      </div>
      <hr>
      <div>
        <div><button onclick="sql_select()">查询</button></div>
        <!-- Vue代码 -->
          <div id="app">
           <table>
              <thead>
                <td>id</td>
                <td>name</td>
                <td>user_id</td>
                <td>type</td>
              </thead>
              <tbody>
                <tr v-for="data in list" :key="data.name">
                  <td> {{data.id}} </td>
                  <td> {{data.name}} </td>
                  <td> {{data.user_id}} </td>
                  <td> {{data.type}} </td>
                </tr>
              </tbody>
           </table>
          </div>
          
      </div>
    </div>
  </div>
    <script>

      function sql_write(){
        let username = document.querySelector("#username")
        let user_id = document.querySelector("#user_id")
        let type = document.querySelector("#type")

        // console.log(username.value,user_id.value,type.value);
        fetch("/api/user",{
          method:"POST",
          body:JSON.stringify({
            username:username.value,
            user_id:user_id.value,
            type:type.value
          }),
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.json()).then(res=>{
          console.log(res);
        })
      }

      function sql_delete(){
        let del_id = document.querySelector('#del_id');

        fetch("/api/user",{
          method:"DELETE",
          body:JSON.stringify({
            del_id : del_id.value
          }),
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.json()).then(res=>{
          console.log(res);
        })
      }

      function sql_updata(){
        let up_id = document.querySelector("#up_id")

        let up_username = document.querySelector("#up_username")
        let up_user_id = document.querySelector("#up_user_id")
        let up_type = document.querySelector("#up_type")

        // 简化版 就改个用户名
        fetch(`/api/user/${up_id.value}`,{
          method:"PUT",
          body:JSON.stringify({
            up_username : up_username.value
          }),
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.json()).then(res=>{
          console.log(res);
        })
      }

      let list=null;
      function sql_select(){
        fetch("api/user").then(res=>res.json()).then(res=>{
          console.log(res);
          list = res.list;
          vue_list();
        })
      }

      function vue_list(){
        var vue = new Vue({
          el: '#app',
          //数据存放
          data: {
            list: list,
            is:false
          },
          methods:{
            isShow(){
              this.is = !this.is;
            }
          }
        })
      }

      function exits(){
        fetch("api/logout").then(res=>res.json()).then(res=>{
          console.log("退出，清除session对象");
          // console.log(res.ok);
          if(res.ok === 1){
            location.href = '/login';
          }
        })
      }
    </script>
  </body>
</html>
